<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彩色照片墙</title>
</head>
<style>
    img{
        width: 250px;
    }
    #p1{
        width: 960px;
        height: 600px;
        margin: 0px auto;
        position: relative;
        /*border: 1px solid black;*/
    }
    #p1>img{
        border: 1px solid red;
        padding: 10px;
    }
    #p1>img:nth-child(1){
        position: absolute;
        left: -10px;
        transform: rotate(45deg);
    }
    #p1>img:nth-child(2){
        position: absolute;
        left: 150px;
        transform: rotate(45deg);
    }
    #p1>img:nth-child(3){
        position: absolute;
        left: 250px;
        transform: rotate(-45deg);
    }
    #p1>img:nth-child(4){
        position: absolute;
        left: 350px;
        transform: rotate(60deg);
    }
    #p1>img:nth-child(5){
        position: absolute;
        left: 600px;
        transform: rotate(-15deg);
    }
    #p1>img:nth-child(6){
        position: absolute;
        top: 250px;
        left: -10px;
        transform: rotate(15deg);
    }
    #p1>img:nth-child(7){
        position: absolute;
        top: 250px;
        left: 350px;
        transform: rotate(50deg);
    }
    #p1>img:nth-child(8){
        position: absolute;
        top: 250px;
        left: 500px;
        transform: rotate(180deg);
    }
    #p1>img:nth-child(9){
        position: absolute;
        top: 250px;
        left: 600px;
        transform: rotate(90deg);
    }
    #p1>img:nth-child(10){
        position: absolute;
        top: 250px;
        left: 700px;
        transform: rotate(10deg);
    }
    #p1 img:hover{
        transform: scale(1.5);
        z-index: 999;
    }
</style>
<body>
<div id="p1">
    <img src="img/1.jpg" alt="">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
    <img src="img/5.jpg">
    <img src="img/6.jpg">
    <img src="img/7.jpg">
    <img src="img/8.jpg">
    <img src="img/9.jpg">
    <img src="img/10.jpg">
</div>
</body>
</html>